<template>
  <el-row style="height: 100%">
    <el-col :span="24" style="height: 100%">
      <div class="header">
        <span class="header-title">设备选择：</span>
        <el-select v-model="selectDevice" placeholder="请选择设备" clearable :style="{ width: '100%' }" size="small" width="300">
          <el-option v-for="(item, index) in selectDeviceOptions" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </div>
      <div class="table">
        <fault-record />
      </div>
      <div>
        <!-- <div class="table">
          <run-state-record />
        </div> -->
        <!-- <div class="graph">
          <el-card>
            <pressure-graph />
          </el-card>
          <el-card>
            <temperature-graph />
          </el-card>
        </div> -->
      </div>
    </el-col>
  </el-row>
</template>

<script>
// import PressureGraph from "../dashboard/PressureGraph.vue";
// import TemperatureGraph from "../dashboard/TemperatureGraph.vue";
// import RunStateRecord from "../dashboard/RunStateRecord.vue";
import FaultRecord from "../dashboard/FaultRecord.vue";
// import DropDownBox from "../dashboard/DropDownBox.vue";
export default {
  data() {
    return {
      selectDevice: 1,
      selectDeviceOptions: [
        {
          label: "设备一",
          value: 1,
        },
        {
          label: "设备二",
          value: 2,
        },
        {
          label: "设备三",
          value: 3,
        },
      ],
    };
  },
  components: {
    // PressureGraph,
    // TemperatureGraph,
    FaultRecord,
    // RunStateRecord,
    // DropDownBox,
  },
};
</script>

<style lang="less" scoped>
@import "./DeviceDetail.less";
</style>
